<template>
	<view class="big_box">
		<view class="top">
			<view class="left">
				<view class="image">
					<image :src="user_info.avatar" mode=""></image>
				</view>
				<view class="sub">
					<view class="title">
						{{user_info.nickname}}
					</view>
					<view class="desc">
						待提现收益:￥{{user_info.money}}
					</view>
				</view>
			</view>
			<u-button type="primary" class="custom-style" shape="circle" @click="go_add()">立即提现</u-button>
		</view>
		<view class="card">
			<view class="card_item" v-for="(item,index) in cardData" :key="index" @click="go_to(index)">
				<image :src="item.url" mode="" v-if="is_show || index != 1"></image>
				<view class="name" v-if="is_show || index != 1">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="order" @click="go_order()">
			<view class="name">
				我的订单
			</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="tab">
			<u-tabs :list="listTab" @click="clickTab" lineColor='#7dc5eb' :activeStyle='activeStyle'></u-tabs>
		</view>

		<view class="order-list">
			<view class="order-item" v-for="item in orderList" :key="item.id">
				<view class="order-header">
					<text class="order-no">订单编号：{{item.order_sn}}</text>
					<text class="order-status" :style="{color:getStatusColor(item.status_name)}">
						{{item.status_name}}
					</text>
				</view>

				<view class="order-content" @click="goToGroupDetail(item)">
					<image class="group-avatar" :src="item.qun_image" mode="aspectFill"></image>
					<view class="group-info">
						<view class="group-name">{{item.qun_name}}</view>
						<view class="group-desc">{{item.qun_descript}}</view>
						<view class="group-price">
							<text class="price">¥{{item.money}}</text>
							<text class="quantity" v-if="item.status_name!='待支付'">时间:{{item.pay_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 退出登录按钮 -->
		<view class="logout-container">
			<u-button type="error" class="logout-btn" @click="handleLogout">退出登录</u-button>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				user_info: {},
				cardData: [{
						name: '专属海报',
						url: "/static/mine_image/poster_icon.png"
					},
					{
						name: '我的团队',
						url: "/static/mine_image/team_icon.png"
					},
					{
						name: '推广链接',
						url: "/static/mine_image/link_icon.png"
					}
				],
				listTab: [{
					name: '直推订单',
				}, {
					name: '间推订单',
				}],
				is_show: true,
				activeStyle: {
					color: '#7dc5eb'
				},
				zhiData: [],
				jianData: [],
				orderList: []
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			// this.getUserinfo()
			this.getListByzhitui()
		},
		onShow() {
			this.getUserinfo()
		},
		methods: {
			//用户信息

			getUserinfo() {
				api.getUserinfo().then(res => {
					if (res.response.statusCode == 200) {
						this.user_info = res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},
			//tab切换
			clickTab(index) {
				this.orderList = []
				// 根据tab切换is_show状态，实现点击间推订单不显示团队卡片
				if (index.index == 1) {
					this.is_show = false
					this.getListByjiantui()
				} else {
					this.is_show = true
					this.getListByzhitui()
				}
			},
			//菜单
			go_to(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/mine/my_poster'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/mine/my_team'
					})
				} else {
					// uni.navigateTo({
					// 	url:'/pages/mine/order_list'
					// })
					let path = "https://d-dazi.bigchun.com/#/?zhitui_id=" + this.user_info.id
					uni.setStorageSync('zhitui_id', this.user_info.id)
					uni.setClipboardData({
						data: path,
						success: () => {
							uni.showToast({
								title: '链接复制成功'
							});
						}
					});
				}

			},
			//订单
			go_order() {
				uni.navigateTo({
					url: '/pages/mine/order_list'
				})
			},
			//去提现
			go_add() {
				uni.navigateTo({
					url: '/pages/mine/my_cash'
				})
			},

			//直推订单
			getListByzhitui() {
				api.getListByzhitui({
					page: 1
				}).then(res => {
					if (res.response.statusCode == 200) {
						this.orderList = res.data.data.list
					}
				}).catch(err => {
					console.error(err)
				})
			},
			//间推订单
			getListByjiantui() {
				api.getListByjiantui({
					page: 1
				}).then(res => {
					if (res.response.statusCode == 200) {
						this.orderList = res.data.data.list
					}
				}).catch(err => {
					console.error(err)
				})
			},
			// 跳转群聊详情
			goToGroupDetail(item) {
				let item1 = {
					id: item.qun_id,
					name: item.qun_name,
					image: item.qun_image,
					price: item.money
				}
				uni.navigateTo({
					url: '/pages/index/pay?data=' + JSON.stringify(item1)
				})
			},
			// 获取订单状态颜色
			getStatusColor(status) {
				const colorMap = {
					'待支付': '#f56c6c',
					'已支付': '#67c23a',
					'已取消': '#909399',
					'已过期': '#e6a23c'
				}
				return colorMap[status] || '#909399';
			},

			// 退出登录方法
			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 清除所有缓存数据
							uni.clearStorageSync();

							// 更新vuex状态为未登录
							this.$store.commit('LOGOUT');

							// 显示退出成功提示
							uni.showToast({
								title: '退出成功',
								icon: 'success'
							});

							// 延迟返回首页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1500);
						}
					}
				});
			}

		}
	}
</script>
<style>
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 60px !important;

	}
</style>
<style lang="scss" scoped>
	@mixin flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
	}

	.big_box {
		background: linear-gradient(to bottom, #f5e7da, #fafafa);
		padding: 1.25rem 1rem;
		min-height: 100vh;

		.top {
			@include flex-center-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 3.5rem;
					height: 3.5rem;
					border-radius: 50%;
				}

				.sub {
					@include flex-center-column;
					gap: .5rem;
					margin-left: .5rem;

					.title {
						font-size: 1rem;
						color: #191919;
					}

					.desc {
						font-size: .8rem;
						color: #7e7e7e;
					}
				}
			}

			.custom-style {
				width: 5rem;
				height: 1.5rem;
				line-height: 1.5rem;
				font-size: .8rem;
				margin: 0;
				background-color: #7dc5eb;
				border-color: #7dc5eb;
			}
		}

		.card {
			padding: 1.5rem .5rem;
			background-color: #fff;
			border-radius: .5rem;
			@include flex-center-between;
			margin: 1rem 0;

			.card_two {
				width: 50%;
				@include flex-center-column;
				align-items: center;
				gap: .5rem;
				// border-right: 1px solid #f1f1f1;
			}

			.card_item {
				width: 50%;
				@include flex-center-column;
				align-items: center;
				gap: .5rem;
				border-right: 1px solid #f1f1f1;
			}

			image {
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
			}

			.name {
				font-size: .8rem;

			}

			.card_item:last-child {
				border-right: none
			}
		}

		.order {
			padding: 1rem .5rem;
			background-color: #fff;
			border-radius: .5rem;
			@include flex-center-between;
			font-size: 1rem;
		}

		.order-list {
			margin-top: 20rpx;
		}

		.order-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f1f1f1;

				.order-no {
					font-size: 26rpx;
					color: #909399;
				}

				.order-status {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.order-content {
				display: flex;
				padding: 20rpx 0;

				.group-avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.group-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.group-name {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;

					}

					.group-desc {
						font-size: 26rpx;
						color: #909399;

					}

					.group-price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;

						.price {
							font-size: 30rpx;
							color: #f56c6c;
							font-weight: 500;
						}

						.quantity {
							font-size: 26rpx;
							color: #909399;
						}
					}
				}
			}
		}

		.logout-container {
			position: fixed;
			bottom: 84px;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			padding: 20rpx;
			background-color: #fff;
			z-index: 999;
		}

		.logout-btn {
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}
</style>